<template>
	<view>
		<nav-bar fontColor="#FFFFFF" title="基本信息"></nav-bar>
		<view class="topBgColor">
			<view class="topTitle">
				<!-- <view class="jiantou">
					<image src="../../../static/icon/left.png"></image>
				</view> -->
				<span style="font-size: 18rpx;">编号：</span><span>{{form.sheepNo}}</span>
				
			</view>
			<view style="display: flex;margin-left: 30rpx;">
				<view class="tag1">{{form.qualityEval}}</view>
				<view class="tag1">{{form.sheepype}}</view>
				<view class="tag1">{{form.sex}}</view>
			</view>
			<view class="topTitle">
				<!-- <view class="jiantou">
					<image src="../../../static/icon/left.png"></image>
				</view> -->
				
				<span style="font-size: 18rpx;">母亲</span>
				<span style="font-size: 18rpx;color: #000000;">{{form.motherNo}}</span>
				<span style="font-size: 18rpx;">父亲</span>
				<span style="font-size: 18rpx;color: #000000;">{{form.fatherNo}}</span>
				<span style="font-size: 18rpx;">出生</span>
				<span style="font-size: 18rpx;color: #000000;">{{form.birthDate}}</span>
			</view> 
			
			<view class="topTitle">
				<!-- <view class="jiantou">
					<image src="../../../static/icon/left.png"></image>
				</view> -->
				<span style="font-size: 18rpx;">状态：{{form.status}}</span>
				<span style="font-size: 18rpx;">羊舍</span>
				<span style="font-size: 18rpx;color: #000000;">{{form.warehouseName}}</span>
				<span style="font-size: 18rpx;">羊圈</span>
				<span style="font-size: 18rpx;color: #000000;">{{form.warehouseAreaNo}}</span>
				<span style="font-size: 18rpx;">体重</span>
				<span style="font-size: 18rpx;color: #000000;">{{form.weight}}公斤</span>
			</view>
			
		</view>
		<!-- <view class="addressBox"> -->
			
			<!-- <view
				style="color: #ef1a1a;font-weight: bold;width: 100%;height: 120rpx;margin: 0 auto;display: flex;justify-content: center;border-bottom: 1px solid #ededed;">
				<view style="font-size: 30rpx;line-height: 130rpx;">体重：</view>
				<view style="font-size: 80rpx;line-height: 100rpx;">{{form.weight}}</view>
				<view style="color: #000000;line-height: 130rpx;margin-left: 10rpx;font-size: 25rpx;color: #ef1a1a;">公斤</view>
			</view> -->
			<!-- <view style="width: 100%;display: flex;justify-content: space-around;"> -->
				<!-- <view style="width: 50%;height: 150rpx;">
					<view style="margin: 25rpx 0 10rpx 0;">
						
					</view> -->
					<!-- <view style="font-size: 25rpx;">出生年月</view>
					<span style="font-size: 40rpx;color: #000000;">{{form.birthDate}}</span> -->
				<!-- </view> -->
				<!-- <view
					style="position: absolute; right: 50%;height: 50rpx;width: 1rpx;background: #a5a5a5;margin-top: 50rpx;">
				</view>
				<view style="width: 50%;">
					<view style="margin: 25rpx 0 10rpx 0;">
						<span style="font-size: 40rpx;color: #000000;">{{form.montlyRate}}</span>
						<span style="font-size: 25rpx;">%</span>
					</view>
					<view style="font-size: 25rpx;">月利率可低至</view>
				</view> -->
			<!-- </view> -->
		<!-- </view> -->
		<uni-card :is-shadow="true" title="羊只管理">
			<v-tabs v-model="activeTab" @change="changeTab" :scroll="false" :bold="true" :tabs="tabs1"
				field="name"></v-tabs>
		<view class="productList"  v-if="activeTab == 0"><!-- show-summary sum-text="总价" -->
			<zb-table :columns="column0" :stripe="true" :fit="true" 
				:data="dataList0"></zb-table>
			
			</view>
			<!-- <view class="productList" v-for="item in dataList1" v-if="activeTab == 1"> -->
			<view class="productList" v-if="activeTab == 1">
			<!-- <zb-table :columns="column1" :stripe="true" :fit="true" show-summary sum-text="总计" -->
			<zb-table :columns="column1" :stripe="true" :fit="true" 
				:data="dataList1"></zb-table>
			
			</view>
			
				<view class="productList" v-if="activeTab == 2">
					<zb-table :columns="column2" :stripe="true" :fit="true" 
						:data="dataList2"></zb-table>
					
				
					</view>
					<view class="productList"  v-if="activeTab == 3">
						<zb-table :columns="column3" :stripe="true" :fit="true" 
							:data="dataList3"></zb-table>
						
					
						</view>
		</uni-card>
		<view class="centerBox">
			<!-- <view class="centerBoxtitle">产品说明</view> -->
			<!-- <view class="centerBoxDetail" v-if="form.birth_date == '酒易贷'">企业注册时间1年以上;法定代表人年龄:60周岁以下;代理年限:代理核心企业产品6个月以上;企业及法人征信情况良好</view>
			 --><!-- <view class="centerBoxDetail" v-else>企业注册时间1年以上;法定代表人年龄:65周岁以下;代理年限:代理核心企业产品1年以上;企业及法人征信情况良好</view>
			<view class="centerBoxtitle">融资流程</view> -->
			<!-- <view class="centerBoxDetail">1步融资，系统</view> -->
			<!-- <uni-card title="1" :isFull="true" sub-title="线上申请" thumbnail="/static/icon/lock.png"></uni-card> -->
			<!-- <view class="centerBoxtitle top">交配记录</view>
			<uni-card style="margin-top: 20rpx;" v-for="item in askList" :title="item.title" :isFull="true" :sub-title="item.sub"
				thumbnail="/static/icon/ask.png">
			</uni-card> -->
		<!-- 	<view class="centerBoxtitle top">产羔信息</view>
			<uni-card style="margin-top: 20rpx;" v-for="item in askList" :title="item.title" :isFull="true" :sub-title="item.sub"
				thumbnail="/static/icon/ask.png">
			</uni-card>
			<view class="centerBoxtitle top">交配记录</view>
			<uni-card style="margin-top: 20rpx;" v-for="item in askList" :title="item.title" :isFull="true" :sub-title="item.sub"
				thumbnail="/static/icon/ask.png">
			</uni-card>
			<view class="centerBoxtitle top">疫苗记录</view>
			<uni-card style="margin-top: 20rpx;" v-for="item in askList" :title="item.title" :isFull="true" :sub-title="item.sub"
				thumbnail="/static/icon/ask.png">
			</uni-card>
			<view class="centerBoxtitle top">阉割信息</view>
			<uni-card style="margin-top: 20rpx;" v-for="item in askList" :title="item.title" :isFull="true" :sub-title="item.sub"
				thumbnail="/static/icon/ask.png">
			</uni-card> -->
		</view>
		<!-- <view style="height: 120rpx;">
			<view class="bottomBox">
				<view class="buttonBox">
					<button class="button_fix" size="default" @click="launch">开通产品</button>
				</view>
			</view>
		</view> -->
	</view>
</template>

<script>
	export default {
		data() {
			return {
				activeTab: 0,
				tabs1: [{
						name: '产羔',
						value: 1
					},
					{
						name: '交配',
						value: 2
					},					
					{
						name: '兽医',
						value: 3
					},
					{
						name: '疫苗',
						value: 4
					}
				],
				column0: [{
						type: 'index',
						label: '#',
						align: 'center'
					},
					{
						name: 'deliveryTime',
						label: '产羔时间',
						emptyString: '暂无数据',
						align: 'center'
					},
					{
						name: 'deliveryQty',
						label: '产羔数量',
						emptyString: '暂无数据',
						align: 'center'
					},
					{
						name: 'sheepStatus',
						label: '母羊状态',
						emptyString: '暂无数据',
						align: 'center'
					},
					{
						name: 'deliveryAlive',
						label: '存活',
						emptyString: '暂无数据',
						align: 'center'
					}
				],
				column1: [{
						type: 'index',
						label: '#',
						align: 'center'
					},
					{
						name: 'sexTime',
						label: '交配时间',
						emptyString: '暂无数据',
						align: 'center'
					},
					{
						name: 'femaleSheepNo',
						label: '母羊编号',
						emptyString: '暂无数据',
						align: 'center'
					},
					{
						name: 'maleSheepNo',
						label: '公羊编号',
						emptyString: '暂无数据',
						align: 'center'
					}
				],
				column2: [{
						type: 'index',
						label: '#',
						align: 'center'
					},
					{
						name: 'medicalRecord',
						label: '治疗记录',
						emptyString: '暂无数据',
						align: 'center'
					},
					{
						name: 'medicalDate',
						label: '诊疗时间',
						emptyString: '暂无数据',
						align: 'center'
					}
				],
				column3: [{
						type: 'index',
						label: '#',
						align: 'center'
					},
					{
						name: 'vaccineTime',
						label: '接种时间',
						emptyString: '暂无数据',
						align: 'center'
					},
					{
						name: 'vaccineType',
						label: '疫苗类别',
						emptyString: '暂无数据',
						align: 'center'
					},
					{
						name: 'medicalId',
						label: '接种机构',
						emptyString: '暂无数据',
						align: 'center'
					}
				],
				dataList0:[],
				dataList1:[],
				dataList2:[],
				dataList3:[],
				title: '',
				form: {}
			}
		},
		onLoad(e) {
			
			this.form = JSON.parse(e.id)
			
		},
		methods: {
			changeTab(e) {
				this.activeTab = e
			  const sheepId = this.form.sheepNo
				
				if (e == 0) {
					
					this.findSheepDeliveryList(sheepId)
				}  if (e == 1) {
					
					this.findSheepInforSexList(sheepId)
				}  if (e == 2) {
					
					this.findSheepInforMedList(sheepId)
				}  if (e == 3) {
					
					this.findSheepInforVaccineList(sheepId)
				}
			},
			findSheepDeliveryList(sheepId) {
				let opt = {
					url: 'basic/gzyyDeliveryBaby/search',
					method: 'POST'
				};
				let params = {
				
					sheepNo:  sheepId
				}
				this.$http.httpTokenRequest(opt, params).then(res => {
					let rangeList = res.data.data
					for (let i in rangeList) {
					
					}
					this.dataList0 = rangeList
					
				})
				},
			findSheepInforSexList(sheepId) {
				let opt = {
					url: 'basic/gzyySex/search',
					method: 'POST'
				};
				let params = {
				
					femaleSheepNo:  sheepId
				}
				this.$http.httpTokenRequest(opt, params).then(res => {
					let rangeList = res.data.data
					for (let i in rangeList) {
					
					}
					this.dataList1 = rangeList
					
				})
				},
			findSheepInforMedList(sheepId) {
				let opt = {
					url: 'basic/gzyyMedicalRecord/search',
					method: 'POST'
				};
				let params = {
				
					sheepNo:  sheepId
				}
				this.$http.httpTokenRequest(opt, params).then(res => {
					let rangeList = res.data.data
					for (let i in rangeList) {
					
					}
					this.dataList2 = rangeList
					
				})
				},
				findSheepInforVaccineList(sheepId) {
					let opt = {
						url: 'basic/gzyyVaccine/search',
						method: 'POST'
					};
					let params = {
					
						sheepNo:  sheepId
					}
					this.$http.httpTokenRequest(opt, params).then(res => {
						let rangeList = res.data.data
						for (let i in rangeList) {
						
						}
						this.dataList3 = rangeList
						
					})
					},
			launch() {
				let formData = JSON.stringify(this.form)
				uni.navigateTo({
					url: '/pages/product/launch-product?id='+formData
				})
			}
		}
	}
</script>

<style lang="scss">
	page {
		background: #f4f4f4;
	}

	.flex {
		display: flex;
	}
	.tag {
		color: dodgerblue;
		background: #FFFFFF;
		width: 120rpx;
		height: 50rpx;
		text-align: center;
		border-radius: 25px;
		font-size: 25rpx;
		line-height: 50rpx;
		background: #b5e3ff;
		position: absolute;
		right: 5%;
		margin-top: 30rpx;
	
	}
	
	.tag1 {
		color: #00d900;
		background: #FFFFFF;
		width: 120rpx;
		height: 50rpx;
		text-align: center;
		border-radius: 25px;
		font-size: 25rpx;
		line-height: 50rpx;
		margin: 20rpx 10rpx;
	}
	
	.tag2 {
		color: #e8d609;
		background: #FFFFFF;
		width: 120rpx;
		height: 50rpx;
		text-align: center;
		border-radius: 25px;
		font-size: 25rpx;
		line-height: 50rpx;
		margin: 20rpx 10rpx;
	}
	.topBgColor {
		width: 100%;
		height: 400rpx;
		background-image: linear-gradient(to right, #495aff 0%, #0acffe 100%);
	}

	.topTitle {
		display: flex;
		height: 100rpx;
		padding: 20rpx;

		span {
			font-size: 40rpx;
			color: #FFFFFF;
			font-weight: bold;
			line-height: 100rpx;
			margin-left: 20rpx;
		}

		image {
			height: 40rpx;
			width: 40rpx;

		}

		.jiantou {
			line-height: 120rpx;
		}

	}

	.addressBox {
		width: 95%;
		margin: 0 auto;
		background: #FFFFFF;
		border-radius: 15rpx;
		// margin-top: 100rpx;
		position: absolute;
		height: 350rpx;
		top: 14%;
		left: 2.5%;
		margin-top: 60rpx;
		text-align: center;
	}

	.centerBox {
		width: 95%;
		margin: 0 auto;
		margin-top: 400rpx;
		.centerBoxtitle {
			font-size: 35rpx;
			color: #000000;
			font-weight: bold;
			margin: 20rpx 0;
		}

		.centerBoxDetail {
			color: #a5a5a5;
			font-size: 28rpx;
			letter-spacing: 2rpx;
			margin: 20rpx 0;
		}

		.top {
			margin: 70rpx 0;
		}
	}

	.bottomBox {
		position: fixed;
		width: 100%;
		bottom: 0;
		margin-bottom: 20rpx;
		z-index: 1000;
	}

	.buttonBox {
		width: 100%;
		margin: 0 auto;
		display: flex;
		justify-content: space-around;

		// margin-top: 200rpx;
	}

	.button_fix {
		width: 90%;
		height: 70rpx;
		// margin: 0 auto;
		color: #FFFFFF;
		background: #2749C8;
		font-weight: bold;
		letter-spacing: 5rpx;
		font-size: 28rpx;
		line-height: 70rpx;

	}
</style>